<template>

<el-dialog
        :model-value="dialogVisible"
        width="450px"
        
        :align-center="true"
        @close="cancel"
        :destroy-on-close="true"
    >
    <!-- <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template> -->

    <div class="dialog__body">
        <div class="user__avatar">
            <img :src="data_obj.avatar?data_obj.avatar:props.defult_avatar" alt="">
            <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" accept="image/*">
            <button class="edit__avatar" @click="open_select_file">
                修改头像
            </button>
        </div>

        <div class="user__name">
            <label for="username">用户名：</label>
            <el-input id="username" size="large" v-model="data_obj.username"></el-input>
        </div>
    
    <div class="dialog__bottom">
    <div>
        <el-button plain @click="cancel" size="large">取消</el-button>
        <el-button type="primary" plain @click="confirm" size="large">确定</el-button>
    </div>
        
        
    </div>
    </div>

    

</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
import { updateAvatar, updateUsernamme } from '@/api/account.js'
import MessageBox from '@/utils/MessageBox'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const props = defineProps(['visible', "title", "instance", "defult_avatar"])
const emit = defineEmits(['cancel', 'confirm'])
const fileInput = ref(null);
const dialogVisible = ref(props.visible)
watch(() => props.visible, (value) => {
    if (value){
        dialogVisible.value = true
    }else{
        emit('cancel')
        dialogVisible.value = false
    }
    // value && (dialogVisible.value = true)
})

const data_obj = ref(props.instance)
// watchEffect(() => data_obj.value = props.instance)

function open_select_file(){
    fileInput.value.click();
}
async function handleFileChange(event){
    const files = event.target.files;
    // console.log(files[0])
    var formdata = new FormData()
    formdata.append('file', files[0]) 
    var res = await updateAvatar(formdata)
    // console.log(res)
    var set_dict = {'avatar': res.data}
    userStore.setData(set_dict)
    MessageBox.success('修改成功')
}

// 修改用户名
async function confirm(){

    var req_data = {
        username: data_obj.value.username
    }
    var res = await updateUsernamme(req_data)
    var set_dict = {'username': data_obj.value.username}
    userStore.setData(set_dict)
    MessageBox.success('修改成功')


    cancel()
}
onMounted(()=>{
    
})


function cancel(){
    emit('cancel')
    dialogVisible.value = false
}


onMounted(()=>{
    
})

</script>

<style lang="scss" scoped>

.dialog__body{
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.user__avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    .edit__avatar{
        cursor: pointer;
        width: 100px;
        height: 40px;
        border-radius: 40px;
        border: 1px solid var(--wchime-color-text);

        display: flex;
        justify-content: center;
        align-items: center;
    }
    img{
        width: 160px;
        height: 160px;
        border-radius: 80px;
        overflow: hidden;
        object-fit: cover;
    }
    
}

.user__name{
    display: flex;
    justify-content: center;
    align-items: center;
    label{
        white-space: nowrap;;
        
    }
   
}
</style>


















